<template>
    <div class="details">
        <div class="header">
            <el-row>
                <el-col :span="22">
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item separator-class="el-icon-arrow-right">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>合同详情</el-breadcrumb-item>
                    </el-breadcrumb>

                </el-col>
                <el-col :span="2">
                    <el-button type="success" size="mini" @click="back">返回</el-button>
                </el-col>
            </el-row>
        </div>
        <div class="content">

            <el-tabs v-model="activeName" @tab-click="handleClick" v-if="content.length>0">
                <el-tab-pane :label="item.memo" :name="item.id.toString()" v-for="item in content" :key="item.code">
                    <div class="data">
                        <div >
                            <span>创建时间:</span>
                            <span>{{item.createTime|format}}</span>

                        </div>
                        <div>
                            <el-image :src="item.url"
                                      fit="cover"
                                      @click="pre(item.url)"
                                      style="width:200px;height: 200px;"
                                      :preview-src-list="imageList"></el-image>
                        </div>
                    </div>

                </el-tab-pane>

            </el-tabs>
            <div v-else>暂无合同信息</div>
        </div>
    </div>
</template>

<script>
    import {queryUserAgreement} from "../../network/business";

    export default {
        name: "details",
        data(){
            return {
                userId:"",
                content:[],
                activeName:'',
                imageList:[]
            }
        },
        methods:{
            handleClick(){

            },
            pre(url){
                this.imageList.push(url)
            },
            back(){
                this.$router.back()
            },
            getcontartDetails(){
                queryUserAgreement({
                    userId:this.userId
                }).then(v=>{
                    if(v.code==200){
                        let {content}=v.data
                        this.content=content
                        this.activeName=(this.content[0].id).toString()
                    }else
                    {
                        this.$message.error(v.msg)
                    }
                })
            }
        },
        filters:{
            format(e){
                let date = new Date(e)
                return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDay()} ${date.getMinutes()}:${date.getSeconds()}`
            }
        },
        created() {
            this.userId=this.$route.query.userId
            this.getcontartDetails()
        }
    }
</script>

<style scoped lang="scss">
.content{
    margin-top: 20px;
}
    .data{
        color: #333;
        div{
            margin-top: 10px;
            span{
                margin-right: 10px;
            }
        }
    }
</style>